<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现精彩促销 | SocialMart</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #2563eb;
            --primary-light: #eff6ff;
            --secondary: #ec4899;
            --success: #10b981;
            --warning: #f59e0b;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --light-gray: #e2e8f0;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f1f5f9;
            color: var(--dark);
        }
        
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .search-bar {
            max-width: 500px;
            width: 100%;
        }
        
        .main-container {
            padding: 2rem 0;
        }
        
        .section-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--dark);
        }
        
        .filter-tabs {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 2rem;
            overflow-x: auto;
            padding-bottom: 0.5rem;
        }
        
        .filter-tab {
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: 20px;
            padding: 0.5rem 1.25rem;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .filter-tab:hover, .filter-tab.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .promo-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 1.5rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .promo-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .promo-header {
            padding: 1rem;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .promo-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .post-time {
            color: var(--gray);
            font-size: 0.85rem;
        }
        
        .promo-content {
            padding: 1rem;
        }
        
        .promo-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            color: var(--dark);
        }
        
        .promo-description {
            color: var(--gray);
            font-size: 0.95rem;
            margin-bottom: 1rem;
            line-height: 1.5;
        }
        
        .promo-price {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .original-price {
            color: var(--gray);
            text-decoration: line-through;
            font-size: 0.9rem;
        }
        
        .discount-price {
            color: var(--secondary);
            font-weight: 700;
            font-size: 1.25rem;
        }
        
        .discount-tag {
            background-color: var(--secondary);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .image-container {
            position: relative;
            margin-bottom: 1rem;
        }
        
        .single-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 6px;
        }
        
        .multi-image {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .multi-image img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
        
        .multi-image.two-images img {
            grid-column: span 1;
        }
        
        .multi-image.three-images img:first-child {
            grid-column: span 2;
            grid-row: span 2;
            height: 305px;
        }
        
        .multi-image.four-images img {
            grid-column: span 1;
            grid-row: span 1;
        }
        
        .no-image-placeholder {
            background-color: var(--primary-light);
            width: 100%;
            height: 180px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            margin-bottom: 1rem;
        }
        
        .promo-actions {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 1rem;
            border-top: 1px solid var(--light-gray);
        }
        
        .action-btn {
            background: none;
            border: none;
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.9rem;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .action-btn:hover {
            color: var(--primary);
        }
        
        .action-btn.liked {
            color: var(--secondary);
        }
        
        .action-btn.saved {
            color: var(--primary);
        }
        
        /* 网格布局样式 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }
        
        /* 大图布局样式 */
        .large-image-layout .promo-card {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        
        .large-image-layout .image-container {
            margin-bottom: 0;
        }
        
        .large-image-layout .single-image {
            height: 100%;
            border-radius: 10px 0 0 10px;
        }
        
        /* 紧凑布局样式 */
        .compact-layout .promo-card {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .compact-layout .image-container {
            flex: 0 0 120px;
            margin-bottom: 0;
        }
        
        .compact-layout .single-image {
            height: 120px;
        }
        
        .compact-layout .promo-content {
            flex: 1;
            padding: 0.75rem 0;
        }
        
        .compact-layout .promo-description {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .compact-layout .promo-actions {
            flex: 0 0 auto;
            flex-direction: column;
            gap: 0.75rem;
            padding: 0.75rem;
            border-top: none;
            border-left: 1px solid var(--light-gray);
        }
        
        @media (max-width: 992px) {
            .large-image-layout .promo-card {
                grid-template-columns: 1fr;
            }
            
            .large-image-layout .single-image {
                border-radius: 10px 10px 0 0;
                height: 250px;
            }
        }
        
        @media (max-width: 768px) {
            .compact-layout .promo-card {
                flex-direction: column;
            }
            
            .compact-layout .image-container {
                width: 100%;
                flex: none;
            }
            
            .compact-layout .single-image {
                width: 100%;
                height: 200px;
            }
            
            .compact-layout .promo-actions {
                flex-direction: row;
                border-left: none;
                border-top: 1px solid var(--light-gray);
                width: 100%;
            }
            
            .filter-tabs {
                margin-bottom: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg py-3">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-shopping-bag"></i>
                SocialMart
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse justify-content-center">
                <div class="search-bar mx-auto">
                    <div class="input-group">
                        <span class="input-group-text bg-transparent border-right-0">
                            <i class="fas fa-search text-gray-400"></i>
                        </span>
                        <input type="text" class="form-control border-left-0" placeholder="搜索促销信息、品牌或商品...">
                    </div>
                </div>
            </div>
            
            <div class="navbar-nav ms-auto align-items-center gap-3">
                <a href="#" class="nav-link"><i class="fas fa-home"></i></a>
                <a href="#" class="nav-link"><i class="fas fa-bell"></i></a>
                <a href="#" class="nav-link"><i class="fas fa-message"></i></a>
                <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="rounded-circle" style="width: 38px; height: 38px; object-fit: cover;">
            </div>
        </div>
    </nav>
    
    <div class="container main-container">
        <!-- 筛选标签 -->
        <div class="filter-tabs">
            <div class="filter-tab active">全部促销</div>
            <div class="filter-tab">限时折扣</div>
            <div class="filter-tab">新品上市</div>
            <div class="filter-tab">满减活动</div>
            <div class="filter-tab">品牌特惠</div>
            <div class="filter-tab">独家优惠</div>
            <div class="filter-tab">即将结束</div>
        </div>
        
        <!-- 网格布局促销信息 -->
        <section class="mb-5">
            <h2 class="section-title">热门推荐</h2>
            <div class="grid-layout">
                <!-- 促销1 - 单张图片 -->
                <div class="promo-card">
                    <div class="promo-header">
                        <div class="promo-author">
                            <img src="https://picsum.photos/100/100?random=10" alt="时尚精选官方账号头像" class="author-avatar">
                            <div>
                                <div class="author-name">时尚精选</div>
                                <div class="post-time">2小时前</div>
                            </div>
                        </div>
                    </div>
                    <div class="promo-content">
                        <h3 class="promo-title">夏季新品连衣裙限时7折优惠</h3>
                        <p class="promo-description">夏季新款连衣裙，采用透气面料，多种款式可选，限时3天7折优惠，先到先得！</p>
                        <div class="promo-price">
                            <span class="original-price">¥399</span>
                            <span class="discount-price">¥279</span>
                            <span class="discount-tag">30% OFF</span>
                        </div>
                        <div class="image-container">
                            <img src="https://picsum.photos/600/400?random=20" alt="夏季连衣裙促销图片" class="single-image">
                        </div>
                    </div>
                    <div class="promo-actions">
                        <button class="action-btn like-btn">
                            <i class="far fa-heart"></i>
                            <span>128</span>
                        </button>
                        <button class="action-btn save-btn">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                        <button class="action-btn comment-btn">
                            <i class="far fa-comment"></i>
                            <span>36</span>
                        </button>
                        <button class="action-btn view-btn">
                            <i class="far fa-eye"></i>
                            <span>1.2k</span>
                        </button>
                    </div>
                </div>
                
                <!-- 促销2 - 多张图片（2张） -->
                <div class="promo-card">
                    <div class="promo-header">
                        <div class="promo-author">
                            <img src="https://picsum.photos/100/100?random=11" alt="数码达人账号头像" class="author-avatar">
                            <div>
                                <div class="author-name">数码达人</div>
                                <div class="post-time">5小时前</div>
                            </div>
                        </div>
                    </div>
                    <div class="promo-content">
                        <h3 class="promo-title">新款无线耳机首发特惠</h3>
                        <p class="promo-description">全新降噪无线耳机，续航长达30小时，首发期间立减200元，赠收纳盒！</p>
                        <div class="promo-price">
                            <span class="original-price">¥899</span>
                            <span class="discount-price">¥699</span>
                            <span class="discount-tag">首发特惠</span>
                        </div>
                        <div class="image-container">
                            <div class="multi-image two-images">
                                <img src="https://picsum.photos/600/400?random=21" alt="无线耳机正面图">
                                <img src="https://picsum.photos/600/400?random=22" alt="无线耳机细节图">
                            </div>
                        </div>
                    </div>
                    <div class="promo-actions">
                        <button class="action-btn like-btn liked">
                            <i class="fas fa-heart"></i>
                            <span>356</span>
                        </button>
                        <button class="action-btn save-btn">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                        <button class="action-btn comment-btn">
                            <i class="far fa-comment"></i>
                            <span>89</span>
                        </button>
                        <button class="action-btn view-btn">
                            <i class="far fa-eye"></i>
                            <span>3.7k</span>
                        </button>
                    </div>
                </div>
                
                <!-- 促销3 - 无图片 -->
                <div class="promo-card">
                    <div class="promo-header">
                        <div class="promo-author">
                            <img src="https://picsum.photos/100/100?random=12" alt="咖啡生活账号头像" class="author-avatar">
                            <div>
                                <div class="author-name">咖啡生活</div>
                                <div class="post-time">昨天</div>
                            </div>
                        </div>
                    </div>
                    <div class="promo-content">
                        <h3 class="promo-title">会员日全场咖啡买一送一</h3>
                        <p class="promo-description">每月15日会员日特别活动，全场手工咖啡买一送一，可与其他优惠叠加使用，欢迎到店品尝！</p>
                        <div class="promo-price">
                            <span class="discount-tag">买一送一</span>
                        </div>
                        <div class="no-image-placeholder">
                            <i class="fas fa-coffee fa-3x"></i>
                        </div>
                    </div>
                    <div class="promo-actions">
                        <button class="action-btn like-btn">
                            <i class="far fa-heart"></i>
                            <span>203</span>
                        </button>
                        <button class="action-btn save-btn saved">
                            <i class="fas fa-bookmark"></i>
                            <span>已收藏</span>
                        </button>
                        <button class="action-btn comment-btn">
                            <i class="far fa-comment"></i>
                            <span>54</span>
                        </button>
                        <button class="action-btn view-btn">
                            <i class="far fa-eye"></i>
                            <span>2.5k</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 大图布局促销信息 -->
        <section class="mb-5">
            <h2 class="section-title">精选特惠</h2>
            <div class="large-image-layout">
                <!-- 促销4 - 单张大图 -->
                <div class="promo-card">
                    <div class="image-container">
                        <img src="https://picsum.photos/800/600?random=23" alt="夏季家电促销图片" class="single-image">
                    </div>
                    <div>
                        <div class="promo-header">
                            <div class="promo-author">
                                <img src="https://picsum.photos/100/100?random=13" alt="家电超市官方账号头像" class="author-avatar">
                                <div>
                                    <div class="author-name">家电超市</div>
                                    <div class="post-time">3天前</div>
                                </div>
                            </div>
                        </div>
                        <div class="promo-content">
                            <h3 class="promo-title">夏季家电清凉特惠，满3000减500</h3>
                            <p class="promo-description">空调、冰箱、风扇等夏季家电全面促销，满3000减500，满5000减1000，更有精美赠品相送。活动时间：7月1日-7月15日，线上线下同步进行。</p>
                            <div class="promo-price">
                                <span class="discount-tag">满减活动</span>
                                <span class="discount-tag">赠礼品</span>
                            </div>
                        </div>
                        <div class="promo-actions">
                            <button class="action-btn like-btn">
                                <i class="far fa-heart"></i>
                                <span>512</span>
                            </button>
                            <button class="action-btn save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </button>
                            <button class="action-btn comment-btn">
                                <i class="far fa-comment"></i>
                                <span>127</span>
                            </button>
                            <button class="action-btn view-btn">
                                <i class="far fa-eye"></i>
                                <span>8.3k</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 促销5 - 多张图片（4张） -->
                <div class="promo-card">
                    <div class="image-container">
                        <div class="multi-image four-images">
                            <img src="https://picsum.photos/600/400?random=24" alt="户外运动装备图片1">
                            <img src="https://picsum.photos/600/400?random=25" alt="户外运动装备图片2">
                            <img src="https://picsum.photos/600/400?random=26" alt="户外运动装备图片3">
                            <img src="https://picsum.photos/600/400?random=27" alt="户外运动装备图片4">
                        </div>
                    </div>
                    <div>
                        <div class="promo-header">
                            <div class="promo-author">
                                <img src="https://picsum.photos/100/100?random=14" alt="户外探险账号头像" class="author-avatar">
                                <div>
                                    <div class="author-name">户外探险</div>
                                    <div class="post-time">1周前</div>
                                </div>
                            </div>
                        </div>
                        <div class="promo-content">
                            <h3 class="promo-title">户外运动装备季末清仓，低至5折</h3>
                            <p class="promo-description">季末大促，所有户外装备低至5折，包括登山包、徒步鞋、冲锋衣等，数量有限，售完即止。购物满1000元免运费，支持30天无理由退换。</p>
                            <div class="promo-price">
                                <span class="original-price">¥1299</span>
                                <span class="discount-price">¥649</span>
                                <span class="discount-tag">50% OFF</span>
                            </div>
                        </div>
                        <div class="promo-actions">
                            <button class="action-btn like-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>289</span>
                            </button>
                            <button class="action-btn save-btn saved">
                                <i class="fas fa-bookmark"></i>
                                <span>已收藏</span>
                            </button>
                            <button class="action-btn comment-btn">
                                <i class="far fa-comment"></i>
                                <span>76</span>
                            </button>
                            <button class="action-btn view-btn">
                                <i class="far fa-eye"></i>
                                <span>5.2k</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 紧凑布局促销信息 -->
        <section>
            <h2 class="section-title">更多优惠</h2>
            <div class="compact-layout">
                <!-- 促销6 - 单张图片 -->
                <div class="promo-card">
                    <div class="image-container">
                        <img src="https://picsum.photos/600/400?random=28" alt="美妆产品图片" class="single-image">
                    </div>
                    <div class="promo-content">
                        <div class="promo-author" style="margin-bottom: 0.5rem;">
                            <img src="https://picsum.photos/100/100?random=15" alt="美妆护肤账号头像" class="author-avatar" style="width: 30px; height: 30px;">
                            <div>
                                <div class="author-name">美妆护肤</div>
                                <div class="post-time">4小时前</div>
                            </div>
                        </div>
                        <h3 class="promo-title">进口面膜买二送一，限时促销</h3>
                        <p class="promo-description">纯天然植物精华面膜，补水保湿效果显著，买二盒送一盒，多买多送！</p>
                        <div class="promo-price">
                            <span class="original-price">¥198</span>
                            <span class="discount-price">¥132</span>
                        </div>
                    </div>
                    <div class="promo-actions">
                        <button class="action-btn like-btn">
                            <i class="far fa-heart"></i>
                            <span>95</span>
                        </button>
                        <button class="action-btn save-btn">
                            <i class="far fa-bookmark"></i>
                        </button>
                        <button class="action-btn comment-btn">
                            <i class="far fa-comment"></i>
                            <span>23</span>
                        </button>
                        <button class="action-btn view-btn">
                            <i class="far fa-eye"></i>
                            <span>867</span>
                        </button>
                    </div>
                </div>
                
                <!-- 促销7 - 无图片 -->
                <div class="promo-card">
                    <div class="image-container">
                        <div class="no-image-placeholder" style="height: 120px;">
                            <i class="fas fa-utensils fa-2x"></i>
                        </div>
                    </div>
                    <div class="promo-content">
                        <div class="promo-author" style="margin-bottom: 0.5rem;">
                            <img src="https://picsum.photos/100/100?random=16" alt="美食探店账号头像" class="author-avatar" style="width: 30px; height: 30px;">
                            <div>
                                <div class="author-name">美食探店</div>
                                <div class="post-time">昨天</div>
                            </div>
                        </div>
                        <h3 class="promo-title">新用户专享，首次点餐立减20元</h3>
                        <p class="promo-description">下载APP并注册，首次点餐满50元立减20元，更有多种美食套餐可选。</p>
                        <div class="promo-price">
                            <span class="discount-tag">新用户特惠</span>
                        </div>
                    </div>
                    <div class="promo-actions">
                        <button class="action-btn like-btn">
                            <i class="far fa-heart"></i>
                            <span>156</span>
                        </button>
                        <button class="action-btn save-btn saved">
                            <i class="fas fa-bookmark"></i>
                        </button>
                        <button class="action-btn comment-btn">
                            <i class="far fa-comment"></i>
                            <span>41</span>
                        </button>
                        <button class="action-btn view-btn">
                            <i class="far fa-eye"></i>
                            <span>1.7k</span>
                        </button>
                    </div>
                </div>
                
                <!-- 促销8 - 多张图片（3张） -->
                <div class="promo-card">
                    <div class="image-container">
                        <div class="multi-image three-images">
                            <img src="https://picsum.photos/600/400?random=29" alt="家居用品图片1">
                            <img src="https://picsum.photos/600/400?random=30" alt="家居用品图片2">
                            <img src="https://picsum.photos/600/400?random=31" alt="家居用品图片3">
                        </div>
                    </div>
                    <div class="promo-content">
                        <div class="promo-author" style="margin-bottom: 0.5rem;">
                            <img src="https://picsum.photos/100/100?random=17" alt="家居生活账号头像" class="author-avatar" style="width: 30px; height: 30px;">
                            <div>
                                <div class="author-name">家居生活</div>
                                <div class="post-time">3天前</div>
                            </div>
                        </div>
                        <h3 class="promo-title">北欧风家居用品组合套装特惠</h3>
                        <p class="promo-description">精选北欧风格家居三件套，包含抱枕、桌布和装饰画，套装购买立省150元。</p>
                        <div class="promo-price">
                            <span class="original-price">¥499</span>
                            <span class="discount-price">¥349</span>
                        </div>
                    </div>
                    <div class="promo-actions">
                        <button class="action-btn like-btn liked">
                            <i class="fas fa-heart"></i>
                            <span>187</span>
                        </button>
                        <button class="action-btn save-btn">
                            <i class="far fa-bookmark"></i>
                        </button>
                        <button class="action-btn comment-btn">
                            <i class="far fa-comment"></i>
                            <span>32</span>
                        </button>
                        <button class="action-btn view-btn">
                            <i class="far fa-eye"></i>
                            <span>2.1k</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 加载更多按钮 -->
        <div class="text-center mt-5">
            <button class="btn btn-primary px-5 py-2">
                <i class="fas fa-refresh me-2"></i>加载更多
            </button>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 筛选标签切换
            const filterTabs = document.querySelectorAll('.filter-tab');
            filterTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    filterTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 点赞功能
            const likeBtns = document.querySelectorAll('.like-btn');
            likeBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('i');
                    const count = this.querySelector('span');
                    let currentCount = parseInt(count.textContent);
                    
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        count.textContent = currentCount + 1;
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        count.textContent = currentCount - 1;
                    }
                });
            });
            
            // 收藏功能
            const saveBtns = document.querySelectorAll('.save-btn');
            saveBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.classList.toggle('saved');
                    const icon = this.querySelector('i');
                    const textSpan = this.querySelector('span');
                    
                    if (this.classList.contains('saved')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        if (textSpan) textSpan.textContent = '已收藏';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        if (textSpan) textSpan.textContent = '收藏';
                    }
                });
            });
        });
    </script>
</body>
</html>
    
